<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@include file="../../base.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>

<title></title>
<link rel="stylesheet" type="text/css" href="${path}/js/jquery/easyui1.5/themes/bootstrap/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${path}/js/jquery/easyui1.5/themes/icon.css"/>
<script type="text/javascript" src="${path}/js/jquery-1.8.0.min.js"></script>
<script src="${path}/js/jquery/easyui1.5/jquery.easyui.min.js"></script>
<script src="${path}/js/jquery/easyui1.5/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript" src="../../../js/fusioncharts-suite-xt/js/fusioncharts.js"></script>
<script type="text/javascript" src="../../../js/fusioncharts-suite-xt/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript" src="../../../js/fusioncharts-suite-xt/js/fusioncharts.charts.js"></script>
<script type="text/javascript" src="../../../js/fusioncharts-suite-xt/js/fusioncharts.gantt.js"></script>
<script type="text/javascript" src="../../../js/fusioncharts-suite-xt/js/fusioncharts.maps.js"></script>
<script type="text/javascript" src="../../../js/fusioncharts-suite-xt/js/fusioncharts.powercharts.js"></script>
<script type="text/javascript" src="../../../js/fusioncharts-suite-xt/js/fusioncharts.ssgrid.js"></script>
<script type="text/javascript" src="../../../js/fusioncharts-suite-xt/js/fusioncharts.treemap.js"></script>
<script type="text/javascript" src="../../../js/fusioncharts-suite-xt/js/fusioncharts.widgets.js"></script>
<script type="text/javascript" src="../../../js/fusioncharts-suite-xt/js/fusioncharts.zoomscatter.js"></script>


	<script type="text/javascript">

	$(function() {

		$('#bb').click(function(){

			var rows = $('#tt').datagrid('getRows');
			var rowsLen = rows.length;

			var currDate = new Date();
			var time = addLeadingZero(currDate.getHours()) + ":" +
					addLeadingZero(currDate.getMinutes()) + ":" +
					addLeadingZero(currDate.getSeconds());

			var randomValue1 = Math.random()	* 1000;
			var randomValue2 = Math.random()	* 1000;

			$('#tt').datagrid('insertRow',{
				index:rowsLen ,  // 索引从0开始
				row: {
					itemid: rowsLen,
					product: '商品'+rowsLen,
					listprice: randomValue1,
					time:time
				}
			});

			$('#tt').datagrid('scrollTo',rowsLen);
			$('#datagrid-row-r1-2-'+rowsLen).css({"color":"red"});
			$('#datagrid-row-r1-2-'+rowsLen).hide();
			$('#datagrid-row-r1-2-'+rowsLen).show(500,function(){
				$(this).css({"color":"black"});
				$('#tt').datagrid('scrollTo',rowsLen);
			});

			updateData(time,randomValue1+'|'+randomValue2);



		});



		//charts
		var stockPriceChart = new FusionCharts({
			id: "stockRealTimeChart",
			type: 'realtimeline',
			renderAt: 'chart-container',
			width: '600',
			height: '300',
			dataFormat: 'json',
			dataSource: {
				"chart": {
					"caption": "实时交易监控",
					"subCaption": "",
					"xAxisName": "时间",
					"yAxisName": "交易额",
					"numberPrefix": "￥",
					"refreshinterval": "0.5",
					"yaxisminvalue": "0",
					"yaxismaxvalue": "1000",
					"numdisplaysets": "30",
					"labeldisplay": "rotate",
					"showValues": "0",
					"showRealTimeValue": "0",
					"theme": "fint"
				},
				"categories": [{
					"category": [{
						"label": "Day Start"
					}]
				}],
				"dataset": [{
					"seriesname": "HRYS Price One",
					"showvalues": "0",
					"data": [{
						"value": "0"
					}]
				},{
					"seriesname": "HRYS Price Two",
					"showvalues": "0",
					"data": [{
						"value": "0"
					}]
				}]
			},
			"events": {
				"initialized": function (e) {

				}
			}
		}).render();



		function addLeadingZero(num) {
			return (num <= 9) ? ("0" + num) : num;
		}
		function updateData(label,value) {
			// Get reference to the chart using its ID
			var chartRef = FusionCharts("stockRealTimeChart"),
			// We need to create a querystring format incremental update, containing
			// label in hh:mm:ss format
			// and a value (random).

			strData = "&label=" + label + "&value=" + value;
			// Feed it to chart.
			chartRef.feedData(strData);
		}


	});








</script>

</head>
<body >
	<div style="float: left">
		<button id="bb">addRow</button>
		<table id="tt" class="easyui-datagrid" style="width:600px;height:250px;margin-top: 10px;float: left; "
			   title="实时滚动交易列表" iconCls="icon-save"
			   rownumbers="false" pagination="false">
			<thead>
			<tr>
				<th field="itemid" width="80">ID</th>
				<th field="product" width="80">产品名</th>
				<th field="listprice" width="80" align="right">交易额</th>
				<th field="time" width="80" align="right">交易时间</th>
			</tr>
			</thead>
		</table>
	</div>

	<div id="chart-container" style="float: left; margin-left: 10px;">FusionCharts will render here</div>
</body>
</html>




